<template>
  
<qfTable :columns='columns' :tableData="tableData" actionLabel="充值" align="center">
  <!-- 头像显示 -->
  <template v-slot:imageUrl="{row}">
    <!-- <el-avatar shape="square" :src="row.imageUrl"></el-avatar> -->
    <img :src="row.imageUrl" width="90" >
  </template>
          <template v-slot:action="{row}">
              <el-button type="success" @click="goPreOrder(row)">
                <template v-slot:icon>
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-wode"></use>
                  </svg>
                  </template>
                  <template #default>
                    点击充值
                  </template>
              </el-button>
          </template>
</qfTable>
</template>

<script setup>
import qfTable from "../../../../components/qfTbale/index.vue"
import * as api from "../../../../api/vip"
import {ref} from "vue"
import { ElMessageBox,ElMessage} from "element-plus";
import { useRouter } from "vue-router";

let router=useRouter()
// 动态定义表头
let columns=[
  {
    label:'产品图片',
    prop:'imageUrl'
  },
  {
    label:'产品名称',
    prop:'productName'
  },
  {
    label:'产品描述',
    prop:'description'
  },
  {
    label:'产品价格',
    prop:'price'
  },
  {
    label:'库存',
    prop:'inventory'
  },
  {
    label:'充值',
    prop:'action'
  }
]
let tableData=ref()
// 获取产品
let getlist=async()=>{
  try{
    let res =await api.getProduct()
    tableData.value=res.data.data.reverse()

  }catch(e){
    console.log(e)
  }
}
getlist()

// 使用弹窗提示用户是否购买
let goPreOrder=(row)=>{
  ElMessageBox.confirm('您正在购买' + row.productName + ',是否继续?', '购买提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
    })
        .then( () => {
          // 2.用户点击了确认，
          // 直接获取当前产品的id，传递给下一个页面，然后跳转到支付页面
          router.push({path:"/pay/payment",query:{product_id:row.product_id}})

        })
        .catch(() => {
            ElMessage({
                type: 'warning',
                message: '已取消删除'
            })
        })
}
</script>
<script >

export default{
  meta:{
    title: 'vipCharge'
    , name: 'vip充值',
        icon:'icon-chongzhi'
    }
    
}
</script>
